<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gift-tips</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <script src="./colors.js"></script>
    <script src="./data.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="note-css.css">
</head>
<body>
<div class="note-container" id="noteContainer">
    <button class="refresh-btn" id="refreshAllBtn" aria-label="重新生成便签">
        <i class="fas fa-redo"></i>
    </button>

    <button class="close-btn" id="closeAllBtn" aria-label="关闭所有便签">
        <i class="fas fa-times"></i>
    </button>

    <div class="notes-wrapper" id="notesWrapper">
        <!-- 便签将通过JavaScript动态生成 -->
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {

        const container = document.getElementById('noteContainer');
        const wrapper = document.getElementById('notesWrapper');
        const closeAllBtn = document.getElementById('closeAllBtn');
        const refreshAllBtn = document.getElementById('refreshAllBtn');

        const timer = {id: null}

        // 创建便签
        function createNotes() {
            // 清空现有便签
            wrapper.innerHTML = '';

            timer.id = setInterval(() => {
                createTextNote();
            }, 80);
        }

        // 创建文本便签
        function createTextNote() {
            const note = document.createElement('div');
            const colorClass = noteColors[Math.floor(Math.random() * noteColors.length)];
            const content = noteContents[Math.floor(Math.random() * noteContents.length)];
            const rotation = (Math.random() * 10 - 5); // -5到5度的随机旋转

            note.className = `note ${colorClass} floating`;
            note.style.setProperty('--rotation', `${rotation}deg`);

            // 设置过渡动画
            note.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';

            note.innerHTML = `<p class="font-medium">${content}</p>`;

            // 随机位置
            const maxX = wrapper.clientWidth - 220; // 200px宽 + 20px边距
            const maxY = wrapper.clientHeight - 150; // 最小高度 + 边距
            const x = Math.random() * maxX;
            const y = Math.random() * maxY;

            note.style.left = `${x}px`;
            note.style.top = `${y}px`;

            wrapper.appendChild(note);

            // 触发重排，确保动画生效
            void note.offsetWidth;

            // 添加淡入动画效果
            setTimeout(() => {
                note.classList.add('visible');
            }, 10);

            // 点击关闭单个便签
            note.addEventListener('click', function (e) {
                e.stopPropagation();
                note.style.animation = 'noteDisappear 0.3s ease-out forwards';
                setTimeout(() => {
                    note.remove();
                }, 300);
            });
        }

        // 点击关闭按钮关闭所有便签
        closeAllBtn.addEventListener('click', function (e) {
            clearInterval(timer.id);
            e.stopPropagation();
            const notes = document.querySelectorAll('.note');
            notes.forEach((note, index) => {
                // 错开关闭动画时间
                setTimeout(() => {
                    note.style.animation = 'noteDisappear 0.3s ease-out forwards';
                    setTimeout(() => {
                        note.remove();
                    }, 300);
                }, index * 50);
            });
            timer.id = null;
        });

        refreshAllBtn.addEventListener("click", () => {
            if (timer.id) {
                return
            }
            createNotes();
        })

        // 初始化创建便签
        createNotes();

        // 窗口大小改变时重新排列便签
        window.addEventListener('resize', function () {
            const notes = document.querySelectorAll('.note');
            notes.forEach(note => {
                // 随机位置
                const maxX = wrapper.clientWidth - 200; // 200px宽 + 20px边距
                const maxY = wrapper.clientHeight - 150; // 最小高度 + 边距
                const x = Math.random() * maxX;
                const y = Math.random() * maxY;

                note.style.left = `${x}px`;
                note.style.top = `${y}px`;
            });
        });
    });
</script>

</body>
</html>